<template>
  <div class="p-4 w-full h-full" v-if="shopdata">
    <div class="p-4 overflow-y-auto size-full bg-[#252931] rounded-md">
      <div class="text-[0.8vw] font-bold">开店申请详细</div>
      <div class="h-[8vw] w-full bg-[#ffffff] mt-3 rounded flex items-center">
        <div
          class="iconfont icon-shenhezhong text-[--them-color] !text-[4vw] m-7 text-[]"
        ></div>
        <div
          class="text-black flex-1 h-full flex flex-col justify-center gap-3 text-[0.7vw]"
        >
          <div class="flex items-center">
            <div
              class="flex items-center text-[#000] font-bold"
              v-for="(i, index) in topdata"
              :key="index"
            >
              <div class="iconfont icon-duihao1"></div>
              <div>{{ i.name }}</div>
              <div
                class="h-[0.1vw] w-[3vw] bg-[#000] rounded"
                v-if="index !== topdata.length - 1"
              ></div>
            </div>
          </div>
          <div class="grid grid-cols-3 grid-rows-2 h-[50%] items-center">
            <div class="flex gap-1">
              <div class="pr-2">店铺ID:</div>
              <div class="font-bold w-[12vw] line-clamp-2">
                {{ shopdata.id }}
              </div>
            </div>
            <div class="flex gap-1">
              <div class="pr-2">负责人:</div>
              <div
                class="font-bold w-[12vw] overflow-hidden whitespace-nowrap text-ellipsis"
              >
                {{ shopdata.name }}
              </div>
            </div>
            <div class="flex gap-1">
              <div class="pr-2">来源:</div>
              <div
                class="font-bold w-[12vw] overflow-hidden whitespace-nowrap text-ellipsis"
              >
                商家App
              </div>
            </div>
            <div class="flex gap-1">
              <div class="pr-2">店铺名称:</div>
              <div
                class="font-bold w-[12vw] overflow-hidden whitespace-nowrap text-ellipsis"
              >
                {{ shopdata.dname }}
              </div>
            </div>
            <div class="flex gap-1">
              <div class="pr-2">商家手机号:</div>
              <div
                class="font-bold w-[12vw] overflow-hidden whitespace-nowrap text-ellipsis"
              >
                {{ shopdata.phone }}
              </div>
            </div>
            <div class="flex gap-1">
              <div class="pr-2">提交时间:</div>
              <div
                class="font-bold w-[12vw] overflow-hidden whitespace-nowrap text-ellipsis"
              >
                {{ shopdata.updatedAt }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="bg-[#fff] mt-1 h-[75%] rounded text-[#000] p-2 overflow-auto"
        style="scrollbar-width: none"
      >
        <div class="flex p-2">
          <div
            class="iconfont icon-biaoqianjiantou !text-[0.5vw] rotate-[-90deg] text-[--them-color]"
          ></div>
          <div class="text-[0.7vw] font-bold">店铺信息</div>
        </div>
        <div>
          <div class="flex mt-3 text-[0.7vw]">
            <div class="mr-3">店铺名称：</div>
            <div class="font-bold">{{ shopdata.dname }}</div>
          </div>
          <div class="flex mt-4 text-[0.7vw]">
            <div class="mr-3">英文名称：</div>
            <div class="font-bold">{{ shopdata.dymname }}</div>
          </div>
          <div class="flex mt-4 text-[0.7vw]">
            <div class="mr-3">店铺类型：</div>
            <div class="font-bold">{{ shopdata.lx }}</div>
          </div>
          <div class="flex mt-4 text-[0.7vw]">
            <div class="mr-3">所在地：</div>
            <div class="font-bold">{{ shopdata.address }}</div>
          </div>
          <div class="flex mt-4 text-[0.7vw] items-center">
            <div class="mr-3">详细地址：</div>
            <div class="flex items-center">
              <div class="font-bold">{{ shopdata.xxaddress }}</div>
              <div class="iconfont icon-ditu text-[--them-color]"></div>
            </div>
          </div>
          <div class="flex mt-4 text-[0.7vw]">
            <div class="mr-3">店铺门面图：</div>
            <img
              class="w-[40vw] h-[20vw] rounded object-cover"
              :src="'http://127.0.0.1:3006/img/' + shopdata.img"
              alt=""
            />
          </div>
        </div>
        <div class="flex p-2 mt-9">
          <div
            class="iconfont icon-biaoqianjiantou !text-[0.5vw] rotate-[-90deg] text-[--them-color]"
          ></div>
          <div class="text-[0.7vw] font-bold">法人信息</div>
        </div>
        <!-- ////// -->
        <div>
          <div class="flex mt-3 text-[0.7vw]">
            <div class="mr-3">法人姓名：</div>
            <div class="font-bold">
              {{ JSON.parse(shopdata.userinfo).name }}
            </div>
          </div>
          <div class="flex mt-3 text-[0.7vw]">
            <div class="mr-3">性别：</div>
            <div class="font-bold">
              {{ JSON.parse(shopdata.userinfo).xb ? "男" : "女" }}
            </div>
          </div>
          <div class="flex mt-3 text-[0.7vw]">
            <div class="mr-3">证件类型：</div>
            <div class="font-bold">居民身份证</div>
          </div>
          <div class="flex mt-3 text-[0.7vw]">
            <div class="mr-3">证件号：</div>
            <div class="font-bold">
              {{ JSON.parse(shopdata.userinfo).sfz }}
            </div>
          </div>
          <div class="flex mt-4 text-[0.7vw]">
            <div class="mr-3">证件正面图：</div>
            <div class="w-[40vw] h-[20vw] rounded bg-[#dad7d7]"></div>
          </div>
        </div>
        <!-- ///// -->
        <div class="flex p-2 mt-9">
          <div
            class="iconfont icon-biaoqianjiantou !text-[0.5vw] rotate-[-90deg] text-[--them-color]"
          ></div>
          <div class="text-[0.7vw] font-bold">营业执照</div>
        </div>
        <div class="flex mt-3 text-[0.7vw]">
          <div class="mr-3">证件编号：</div>
          <div class="font-bold">
            {{ JSON.parse(shopdata.shopinfo).yyzz.index }}
          </div>
        </div>
        <div class="flex mt-3 text-[0.7vw]">
          <div class="mr-3">证件有效日期：</div>
          <div class="font-bold">
            {{ JSON.parse(shopdata.shopinfo).yyzz.time[0] }}至{{
              JSON.parse(shopdata.shopinfo).yyzz.time[1]
            }}
          </div>
        </div>
        <div class="flex mt-4 text-[0.7vw]">
          <div class="mr-3">证件正面图：</div>
          <div class="w-[40vw] h-[20vw] rounded bg-[#dad7d7]"></div>
        </div>
        <!-- //// -->
        <div class="flex p-2 mt-7">
          <div
            class="iconfont icon-biaoqianjiantou !text-[0.5vw] rotate-[-90deg] text-[--them-color]"
          ></div>
          <div class="text-[0.7vw] font-bold">经营许可证</div>
        </div>
        <div class="flex mt-3 text-[0.7vw]">
          <div class="mr-3">证件编号：</div>
          <div class="font-bold">
            {{ JSON.parse(shopdata.shopinfo).yyyk.index }}
          </div>
        </div>
        <div class="flex mt-3 text-[0.7vw]">
          <div class="mr-3">证件有效日期：</div>
          <div class="font-bold">
            {{ JSON.parse(shopdata.shopinfo).yyyk.time[0] }}至{{
              JSON.parse(shopdata.shopinfo).yyyk.time[1]
            }}
          </div>
        </div>
        <div class="flex mt-4 text-[0.7vw]">
          <div class="mr-3">证件正面图：</div>
          <div class="w-[40vw] h-[20vw] rounded bg-[#dad7d7]"></div>
        </div>
        <!--  -->
        <div class="h-[5vw] flex mt-9">
          <div class="flex-1 flex pl-10 items-center gap-6">
            <el-button type="primary" @click="s_shopsucc">审核通过</el-button>
            <el-button type="danger" @click="s_shopout">审核失败</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { shopout, shopsucc } from "@/api/index";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
//0申请中 1已入住 2已关闭 3申请失败
//@ts-ignore
const shopdata = JSON.parse(route.query.data);
console.log(shopdata);
const topdata = [
  { name: "商家提交审核" },
  { name: "审核申请中" },
  { name: "审核申请成功" },
  { name: "审核申请失败" },
];
const s_shopsucc = async () => {
  const rudata = await shopsucc(shopdata.userid, shopdata.id);
  if (rudata.code == 200) {
    router.go(-1);
    return ElMessage({
      type: "success",
      message: "审核成功",
    });
  }
  ElMessage({
    type: "error",
    message: "审核失败",
  });
};
const s_shopout = async () => {
  const rudata = await shopout(shopdata.userid, shopdata.id);
  if (rudata.code == 200) {
    router.go(-1);

    return ElMessage({
      type: "success",
      message: "审核退回",
    });
  }
};
</script>
